<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="featon inc.">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/static/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/vendor/layui/css/layui.css">
    <title>智慧中蜂可视化管理平台</title>
    <style>
        .container {width: 1080px !important;}
        .log-navbar {
            padding: 20px 0;
            margin-bottom: 0;
            border: 0;
            color: #337AB7;
        }
        .log-navbar .navbar-brand {
            font-size: 24px;
            margin-left: -15px;
            color: #337AB7;
        }
        .log-navbar .navbar-brand:hover {
            font-size: 24px;
            margin-left: -15px;
            color: #2A6699;
        }
        .log-navbar .navbar-header {
            margin-right: 0;
            margin-left: 0;
            float: left;
        }
        .login-box{
            position: relative;
            overflow: hidden;
            background: #1e88e5 center bottom no-repeat;
        }

        .login-miaoshu{
            position: absolute;
            width:594px; height: 233px;
            z-index: 9999;
            left: 40%;
            top: 50%;
            margin-top: -120px;
            margin-left: -390px;
            color: #fff;
        }

        .login-form-box {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -180px;
            margin-left: 150px;
            width: 350px;
            z-index: 99999;
            background-color: #E8F3FC;
            opacity: .9;
            border-radius: 4px;
        }

        .log-footer {
            padding: 15px 0 0 0;
            color: #999;
            overflow: hidden;
        }
        #particles-js{
            width: 100%;
            height: 100%;
            background-color: #1E88E5;
            background-image: url('/static/images/login/login_bg.jpg');
            background-size: cover;
            background-position: bottom;
            background-repeat: no-repeat;
        }


        .layui-input-block{
            margin-left: 0px;
            min-height: 36px;
        }

        #img{width: 83px; height: 29px;}
    </style>
</head>
<body>
<nav class="navbar navbar-static-top log-navbar">
    <div class="container">
        <div class="navbar-header">
<!--            <a class="navbar-brand" href="#"><strong>翼迅科技统一用户认证中心</strong></a>-->
            <h1 style="font-size: 48px;text-shadow: 3px 3px 3px #b5abab; color: #bb5819"><strong>智慧中蜂可视化管理平台</strong></h1>
        </div>
    </div>
</nav>

<div class="login-box" style="height: 750px;">
    <div id="particles-js"></div>
    <div class="login-miaoshu">
<!--        <h1 style="font-size: 48px;text-shadow: 3px 3px 3px #666666;"><strong>智慧中锋可视化管理平台</strong></h1>-->
        <br>
       <!-- <p style="color: rgba(255,255,255,.6);">当前版本： v3.0 </p>-->
    </div>


    <div class="login-form-box">
        <div style="font-size: 20px; padding: 6px 9px; border-bottom: 1px solid #D0D0D0;">
            <i class="fa fa-user-circle-o" aria-hidden="true"></i> 用户登录
        </div>
        <div style="padding: 26px 18px;">
            <form id="form1" name="form1" method="post" action="" target="targetFrame">
                <div class="input-group" style=" margin-bottom: 16px;">
                    <div class="input-group-addon">
                        <div class="input-group-text"><i class="fa fa-user-o fa-fw" aria-hidden="true"></i></div>
                    </div>
                    <label for="username"></label><input type="text" class="form-control" id="username" name="username" tabindex="1" maxlength="20" placeholder="请输入登录帐号">
                </div>
                <div class="input-group" style=" margin-bottom: 16px;">
                    <div class="input-group-addon">
                        <div class="input-group-text"><i class="fa fa-key fa-fw" aria-hidden="true"></i></div>
                    </div>
                    <label for="password"></label><input type="password" class="form-control" id="password" name="password" tabindex="2" maxlength="20" placeholder="请输入密码">
                </div>
<!--                <div class="input-group" style=" margin-bottom: 16px;">-->
<!--                    <div class="input-group-addon">-->
<!--                        <div class="input-group-text"><i class="fa fa-check-circle-o fa-fw" aria-hidden="true"></i></div>-->
<!--                    </div>-->
<!--                    <label for="auth_code"></label><input type="number" class="form-control" id="auth_code" name="auth_code" tabindex="3" maxlength="20" placeholder="请输入验证码" style="flex:auto;">-->
<!--                    <img alt=""  src="/captcha" id="img"  onclick="changeCreateImage();"  style="position: absolute; right: 3px; top: 3px;z-index: 99999;">-->
<!--                </div>-->

                <div class="layui-form-item">
                    <!--					<label class="layui-form-label" style="color: #FFF;">滑动验证</label>-->
                    <div class="layui-input-block">
                        <div id="slider"></div>
                    </div>
                </div>


                <button id="btnSubmit" name="btnSubmit" type="button"  tabindex="4" class="btn btn-success btn-block"><i class="fa fa-unlock-alt fa-fw" aria-hidden="true"></i> 登 录</button>
            </form>
        </div>
    </div>

</div>

<footer class="log-footer">
    <div class="container text-center">
        <p class="text-muted small" style="color: #D84C29 !important;">
            浏览器建议：<a href="https://www.google.cn/chrome/" target="_blank">Chrome谷歌浏览器【推荐】</a>、<a href="https://browser.360.cn/ee/" target="_blank">360浏览器【选择极速模式】</a>、IE9及以上版本等最新版浏览器，分辨率1280*800及以上，达到最快最稳定的使用效果。
        </p>
        <p class="text-muted small">技术支持：陕西翼迅电子信息科技股份有限公司 Copyright © 2020 YiXun All Rights Reserved.</p>
    </div>
</footer>

<iframe id="targetFrame" name="targetFrame" style="border: 0;" width="0" height="0"></iframe>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/layui/layui.all.js"></script>
<!--<script src="/static/vendor/particles/particles.min.js"></script>-->
<script src="/static/vendor/skin/js/md5.js"></script>
<script>

    jQuery(function($){
        $(window).resize(function () {
            var myDivHeight = $(window).height() - 215;
            $(".login-box").css("height", myDivHeight);
        }).resize();

        setInterval(function(){
            changeCreateImage();
        },1000*120) ;

        // /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
        // particlesJS.load('particles-js', 'ft.plugin/particles/particles.json', function() {
        //     console.log('callback - particles.js config loaded');
        // });

        // // 回车登录
        // $(function(){
        //     $(this).keyup(function(ev){
        //         if(ev.keyCode == 13){
        //             loginWCM();
        //         }
        //     });
        // });
    });


    layui.config({
        base: '/static/vendor/layui/dist/'
    }).use(['sliderVerify', 'jquery', 'form'], function() {
        var sliderVerify = layui.sliderVerify,
            $ = layui.jquery,
            form = layui.form;
        var slider = sliderVerify.render({
            elem: '#slider',
            onOk: function(){//当验证通过回调
                layer.msg("滑块验证通过");
            }
        })
        $("#btnSubmit").click(function () {

            if($.trim($("#username").val())=="") {
                // alert("登录帐号不能为空！");
                layer.msg("登录帐号不能为空！");
                $("#username").focus();
                return;
            }
            if($.trim($("#password").val())=="") {
                layer.msg("密码不能为空！");
                // alert("密码不能为空！");
                $("#password").focus();
                return;
            }

            if(slider.isOk()){

                $.post('/login', {username:$.trim($("#username").val()),password:$.md5($.trim($("#password").val()))},
                    function(value) {
                        // alert(value.status);
                        if(value.status !== 'SUCCESS') {
                            layer.msg("用户名密码错误!");
                            // alert('用户名密码错误');

                        }else{
                            layer.msg("登录成功！");
                            setTimeout(function () {
                                window.location.href = "/index";
                            },800)
                        }

                    },"json");

            }else{
                layer.msg("请先通过滑块验证！");
            }

        })

    });
</script>
</body>
</html>